<template>
  <div class="dd-assign">
    <el-dialog
      width="1000px"
      height="800px"
      title="浙政钉交办"
      :modal="false"
      :visible.sync="dialogVisible"
      custom-class="deep dd-assign-con"
      @close="clear"
    >
      <el-form :model="formData" ref="elForm" label-width="100px" class="dd-assgin-dialog">
        <el-form-item label="描述" prop="appDesc" :rules="{ required: true, message: '请输入描述' }">
          <el-input type="textarea" rows="2" v-model="formData.appDesc" :autosize="{ minRows: 1, maxRows: 8 }"></el-input>
        </el-form-item>
        <el-form-item label="附件">
          <el-upload
            multiple
            class="upload-demo"
            :action="baseURL + 'society/olap/file'"
            :on-success="UploadSuccess"
            :on-remove="handleRemove"
            :file-list="formData.fileList"
          >
            <el-button class="fontSize18" type="text">点击上传</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <div class="btn-group" style="justify-content: flex-start">
        <p class="fontSize18" style="color:white !important;">发送人员已选择{{ result.selectPersonInfo.length }}人</p>
        <el-button type="primary" v-if="result.selectPersonInfo.length > 0" @click="handleSync">同步指令</el-button>
      </div>

      <div>
        <el-collapse accordion class="select-person">
          <el-collapse-item v-for="(v, i) in result.selectPersonInfo" :key="i">
            <template slot="title">
              <div class="box width100 fontSize18">
                <span>{{ v.responsible || '姓名' }}（{{ v.phone || '电话号码' }}）</span>
                <span class="not-wrap" :title="v.regionName">{{ v.regionName || '--' }}</span>
                <span class="not-wrap" :title="v.responsibilityDeptName">{{ v.responsibilityDeptName || '--' }}</span>
                <span class="text-align-right"
                  ><el-button type="danger" size="small" @click.stop="delPersonInfo(v, i)" class="fontSize18">移除</el-button></span
                >
              </div>
            </template>
            <add-form
              :ref="`addFormRef-${i}`"
              :dataSource="v"
              @setValue="(name, value) => setPersonInfoValue(v, name, value)"
            />
          </el-collapse-item>
        </el-collapse>
      </div>

      <div class="btn-group" style="justify-content: flex-start">
        <el-button type="primary" @click="addPerson" class="fontSize18">新增人员</el-button>
        <el-popover placement="right" width="300" height="400" trigger="click">
          <el-tree
            :data="dataTree"
            show-checkbox
            node-key="label"
            ref="tree"
            :default-expand-all="true"
            @check-change="handleCheckedChange"
          >
          </el-tree>
          <el-button slot="reference" class="fontSize18">选择分组成员</el-button>
        </el-popover>
      </div>
      <div class="btn-group" style="justify-content: flex-end">
        <el-button type="default" @click="clear" class="fontSize18">取消</el-button>
        <el-button type="primary" @click="submit" class="fontSize18">钉钉通知</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { zzdjbGroup, addDingdingAssign } from '../../utils/api';
import addForm from './addForm';
export default {
  name:'ddAssign',
  components: {
    addForm,
  },
  data() {
    return {
      eventSource:{},
      dialogVisible: false,
      formData: {
        appDesc: null,
        fileList: []
      },
      temv :{},
      dataTree: [],
      result: {
        selectPersonInfo: [],
      },
    };
  },
  computed: {
    baseURL() {
      return `http://${window.document.location.host}/`;
    },
  },
  methods: {
    clear() {
      this.$emit('close');
      this.dialogVisible = false;
      this.temv = {};
    },
    submit() {
      var v = this.temv;
      const params = { appDesc: this.formData.appDesc };
      params.fileList = this.formData.fileList;
      params.files = [];
      if (this.formData.fileList.length > 0) {
        params.files = this.formData.fileList.map((v) => ({
          fileName: v.name,
          resourcesPath: v.response.data.savePath,
        }));
      }
      params.values = this.result.selectPersonInfo;
      this.addDingdingAssign(params);
    },
    handleSync() {
      if (this.result.selectPersonInfo.length > 0) {
        const arr = this.result.selectPersonInfo;
        arr.forEach((v, i) => {
          v.instructOutput = this.formData.appDesc;
          const str = 'addFormRef-' + i;
          this.$refs[str][0].formData.instructOutput = this.formData.appDesc;
        });
      }
    },
    setPersonInfoValue(v, name, value) {
      v[name] = value;
      this.temv = v;
    },
    addPerson() {
      this.result.selectPersonInfo.push({
        responsibilityDept: '',
        responsibilityDeptName: '',
        regionCode: '',
        regionName: '',
        responsible: '',
        phone: '',
        instructOutput: '',
      });
    },
    delPersonInfo(v, i) {
      if (this.$refs.tree.getCheckedNodes().length > 0) {
        const arr = [];
        this.$refs.tree.getCheckedNodes().forEach((item) => {
          if (item.label !== v.responsible) {
            arr.push(item.label);
          }
        });
        this.$refs.tree.setCheckedKeys(arr);
      } else {
        this.result.selectPersonInfo.splice(i, 1);
      }
    },
    UploadSuccess(res, file, fileList) {
      this.formData.fileList = fileList;
    },
    handleRemove(file, fileList) {
      this.formData.fileList = fileList;
      console.log({ file, fileList });
    },
    handleCheckedChange(a, b) {
      if (b) {
        this.result.selectPersonInfo.push(a.source);
      } else {
        const index = this.result.selectPersonInfo.findIndex((v) => v.uuid === a.source.uuid);
        this.result.selectPersonInfo.splice(index, 1);
      }
    },
    addDingdingAssign(data) {
      addDingdingAssign(data).then((res) => {
        let { msgs, status } = res.data;
        if (status === 200) {
          this.$message({
            message: msgs[Object.keys(msgs)[0]],
            type: 'success',
          });
          this.$emit('close')
          this.dialogVisible = false;
        } else {
          this.$message({
            message: msgs[Object.keys(msgs)[0]],
            type: 'error',
          });
        }
      });
    },
    ddAssignOpen(){
      this.dialogVisible = true;
    },
    passfromPlatform(info){
      this.eventSource = info;
      if (this.eventSource) {
      if (this.eventSource.id) {
        const { contentType, address, eventId, warnContent } = this.eventSource;
        this.formData.appDesc = `${contentType},发生在${address},编号为${eventId}的事件：【${warnContent}】需关注落实`;
      } else {
        const { source, createTime, uuid, content } = this.eventSource;
        this.formData.appDesc = `${source},发生在${createTime},编号为${uuid}的事件：【${content}】需关注落实`;
      }
      // this.formData.appDesc = '测试数据，请忽略'
    }
    }
  },
  mounted() {
    window.ddAssignInit = this.ddAssignOpen;
    window.fromPlatformInit = this.passfromPlatform;
    // if (this.eventSource) {
    //   if (this.eventSource.id) {
    //     const { contentType, address, eventId, warnContent } = this.eventSource;
    //     this.formData.appDesc = `${contentType},发生在${address},编号为${eventId}的事件：【${warnContent}】需关注落实`;
    //   } else {
    //     const { source, createTime, uuid, content } = this.eventSource;
    //     this.formData.appDesc = `${source},发生在${createTime},编号为${uuid}的事件：【${content}】需关注落实`;
    //   }
    //   // this.formData.appDesc = '测试数据，请忽略'
    // }
    zzdjbGroup().then((res) => {
      if (res.success) {
        const tree = [];
        res.data.list.forEach((v) => {
          if (v.groupUsers) {
            const params = { label: v.groupName, disabled: true, children: [] };
            params.children = v.groupUsers.map((vs) => ({ label: vs.responsible, source: vs }));
            tree.push(params);
          } else {
            tree.push({ label: v.groupName });
          }
        });
        this.dataTree = tree;
      }
    });
  },
};
</script>


<style>
.dd-assgin-dialog .el-form-item__label {
  color: #fff;
}
.dd-assgin-dialog .el-textarea__inner,
.dd-assgin-dialog .el-input__inner {
  background: transparent;
  box-shadow: 0px 0px 4px 0px rgba(2, 16, 45, 0.46);
  border-radius: 1px;
  color: #fff;
}
.el-collapse-item__wrap {
  background-color: transparent!important;
  color: white !important;
}
.el-collapse-item__header {
  background-color: transparent!important;
  color: white !important;
}
.dd-assign-con .el-dialog__body {
  height: 500px;
  margin-top: 15px;
  color: white!important;
  overflow-y: auto;
}
.el-dialog__wrapper {
  width: 3096px;
  overflow: unset !important;
}
</style>

<style scoped>
.dd-assign-con::-webkit-scrollbar {
  width: 6px; 
}

.dd-assign-con::-webkit-scrollbar-thumb {
  background-color: #43ccff;
  border-radius: 3px;
}
.select-person {
  max-height: 200px;
  overflow-y: scroll;
  margin: 0 50px;
}
.select-person::-webkit-scrollbar {
    width: 6px; 
  }
.select-person::-webkit-scrollbar-thumb {
  background-color: #43ccff;
  border-radius: 3px;
}
.btn-group {
  margin: 0 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.width100 {
  width: 100%;
}
.box {
  display: flex;
  align-items: center;
  
}
.box span{
    flex:1;
}
.el-form /deep/ .el-form-item__label{
  font-size: 18px !important;
}
.el-textarea{
  font-size: 18px !important;
}
.fontSize18{
  font-size: 18px;
}
</style>
